import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import { Row, Col, Icon, Menu, Dropdown,Modal } from 'antd';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import { getTimeDistance } from '@/utils/utils';
import styles from './Analysis.less';
import PageLoading from '@/components/PageLoading';
import AreaMap from './AreaMap';
//const IntroduceRow = React.lazy(() => import('./IntroduceRow'));
const StaffInfoCard = React.lazy(() => import('./StaffInfoCard'));
const TopSearch = React.lazy(() => import('./TopSearch'));
const OfflineData = React.lazy(() => import('./OfflineData'));
const OrganStatistic = React.lazy(() => import('./OrganStatistic'));
const StaffBaseInfoStatistic = React.lazy(() => import('./StaffBaseInfoStatistic'));
const PoliceStatistic = React.lazy(() => import('./PoliceStatistic'));
const FormationStatistic = React.lazy(() => import('./FormationStatistic'));
const PositionStatistic = React.lazy(() => import('./PositionStatistic'));

@connect(({ statisticchart, loading }) => ({
  statisticchart,
  loading: loading.effects['statisticchart/fetch'],
}))
class Analysis extends Component {
  state = {
    salesType: 'all',
    currentTabKey: '',
    rangePickerValue: getTimeDistance('year'),
  };

  componentDidMount() {
    const { dispatch } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'statisticchart/fetch',
      });
    });
  }

  componentWillUnmount() {
    cancelAnimationFrame(this.reqRef);
  }

  handleTabChange = key => {
    this.setState({
      currentTabKey: key,
    });
  };

  handleRangePickerChange = rangePickerValue => {
    const { dispatch } = this.props;
    this.setState({
      rangePickerValue,
    });

    dispatch({
      type: 'statisticchart/fetchSalesData',
    });
  };

  selectDate = type => {
    const { dispatch } = this.props;
    this.setState({
      rangePickerValue: getTimeDistance(type),
    });

    dispatch({
      type: 'statisticchart/fetchSalesData',
    });
  };

  isActive = type => {
    const { rangePickerValue } = this.state;
    const value = getTimeDistance(type);
    if (!rangePickerValue[0] || !rangePickerValue[1]) {
      return '';
    }
    if (
      rangePickerValue[0].isSame(value[0], 'day') &&
      rangePickerValue[1].isSame(value[1], 'day')
    ) {
      return styles.currentDate;
    }
    return '';
  };

  render() {
    const {
    	rangePickerValue,
    	salesType,
    	currentTabKey
    } = this.state;

    const { statisticchart, loading } = this.props;
    const {
      visitData,
      visitData2,
      salesData,
      searchData,
      offlineData,
      offlineChartData,
      salesTypeData,
      salesTypeDataOnline,
      salesTypeDataOffline,

      staffInfoDataByArea,
  		staffInfoDataByType,
  		staffInfoDataByPoliticsFace,
  		staffInfoDataByPostType,
  		staffInfoDataByStaffNation,

      organInfoData,
      organInfoDataByType,
  		organInfoDataByLevel,
      policeSpreadData,
      policeDataByPoliceRank,
  		policeDataByDutyLevel,
  	  formationData,
  	  positionData
    } = statisticchart;
    
    //人员统计信息
    const parentMethodsByStaffBaseInfo = {
      staffInfoDataByArea,
      staffInfoDataByPoliticsFace,
      staffInfoDataByPostType,
      staffInfoDataByStaffNation,
      staffInfoDataByType
    }

    //机构统计信息
    const parentMethodsByOrgan = {
      organInfoData,
      organInfoDataByType,
  		organInfoDataByLevel
    }

    //警力分布信息
    const parentMethodsByPolice = {
      policeSpreadData,
      policeDataByPoliceRank,
  		policeDataByDutyLevel
    }

    //编制统计信息
    const parentMethodsByFormation = {
      formationData
    }

    //职数统计信息
    const parentMethodsByPosimation = {
      positionData
    }

    const menu = (
      <Menu>
        <Menu.Item>操作一</Menu.Item>
        <Menu.Item>操作二</Menu.Item>
      </Menu>
    );

    const dropdownGroup = (
      <span className={styles.iconGroup}>
        <Dropdown overlay={menu} placement="bottomRight">
          <Icon type="ellipsis" />
        </Dropdown>
      </span>
    );

    const activeKey = currentTabKey || (offlineData[0] && offlineData[0].name);

    return (
      <GridContent>
        {/*<Suspense fallback={<PageLoading />}>
          <IntroduceRow loading={loading} visitData={visitData} />
        </Suspense>*/}
        <Suspense fallback={null}>
          <StaffInfoCard
            rangePickerValue={rangePickerValue}
            salesData={salesData}
            isActive={this.isActive}
            handleRangePickerChange={this.handleRangePickerChange}
            loading={loading}
            selectDate={this.selectDate}
          />
        </Suspense>
        <Suspense fallback={null}>
          <AreaMap loading={loading}/>
        </Suspense>
        <div className={styles.twoColLayout}>
          <Row gutter={24} type="flex">
            {/*<Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <TopSearch
                  loading={loading}
                  visitData2={visitData2}
                  selectDate={this.selectDate}
                  searchData={searchData}
                  dropdownGroup={dropdownGroup}
                />
              </Suspense>
           </Col>*/}
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <StaffBaseInfoStatistic
                  dropdownGroup={dropdownGroup}
                  loading={loading}
                  {...parentMethodsByStaffBaseInfo}
                />
              </Suspense>
            </Col>
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <OrganStatistic
                  dropdownGroup={dropdownGroup}
                  loading={loading}
                  {...parentMethodsByOrgan}
                />
              </Suspense>
            </Col>
          </Row>
          <Row gutter={24} type="flex">
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <PoliceStatistic
                  dropdownGroup={dropdownGroup}
                  loading={loading}
                  {...parentMethodsByPolice}
                />
              </Suspense>
            </Col>
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <FormationStatistic
                  dropdownGroup={dropdownGroup}
                  loading={loading}
                  {...parentMethodsByFormation}
                />
              </Suspense>
            </Col>
          </Row>
          <Row gutter={24} type="flex">
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <PositionStatistic
                  dropdownGroup={dropdownGroup}
                  loading={loading}
                  {...parentMethodsByPosimation}
                />
              </Suspense>
            </Col>
          </Row>
        </div>
        {/*<Suspense fallback={null}>
          <OfflineData
            activeKey={activeKey}
            loading={loading}
            offlineData={offlineData}
            offlineChartData={offlineChartData}
            handleTabChange={this.handleTabChange}
          />
        </Suspense>*/}
      </GridContent>
    );
  }
}

export default Analysis;
